<template>
	<view class="push-test-container">
		<view class="header">
			<text class="title">Android 消息推送测试</text>
		</view>

		<!-- 设备信息 -->
		<view class="section">
			<view class="section-title">设备信息</view>
			<view class="info-item">
				<text class="label">客户端ID：</text>
				<text class="value">{{ clientId || '未获取' }}</text>
			</view>
			<view class="info-item">
				<text class="label">平台：</text>
				<text class="value">{{ platform }}</text>
			</view>
		</view>

		<!-- 推送权限 -->
		<view class="section">
			<view class="section-title">推送权限</view>
			<view class="info-item">
				<text class="label">通知权限：</text>
				<text class="value" :class="notificationEnabled ? 'success' : 'error'">
					{{ notificationEnabled ? '已授权' : '未授权' }}
				</text>
			</view>
			<button @click="requestPermission" class="btn">请求通知权限</button>
		</view>

		<!-- 推送测试 -->
		<view class="section">
			<view class="section-title">推送测试</view>
			<button @click="createLocalNotification" class="btn primary">创建本地通知</button>
			<button @click="testCustomNotification" class="btn primary">测试自定义通知</button>
			<button @click="testRichNotification" class="btn primary">测试富文本通知</button>
		</view>

		<!-- 推送日志 -->
		<view class="section">
			<view class="section-title">推送日志</view>
			<scroll-view class="log-container" scroll-y>
				<view v-for="(log, index) in logs" :key="index" class="log-item">
					<text class="log-time">{{ log.time }}</text>
					<text class="log-content">{{ log.content }}</text>
				</view>
			</scroll-view>
			<button @click="clearLogs" class="btn secondary">清空日志</button>
		</view>

		<!-- 测试表单 -->
		<view class="section">
			<view class="section-title">自定义推送内容</view>
			<view class="form-item">
				<text class="form-label">标题：</text>
				<input class="form-input" v-model="pushTitle" placeholder="请输入通知标题" />
			</view>
			<view class="form-item">
				<text class="form-label">内容：</text>
				<textarea class="form-textarea" v-model="pushContent" placeholder="请输入通知内容" />
			</view>
			<button @click="sendCustomPush" class="btn primary">发送自定义通知</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			clientId: '',
			platform: '',
			notificationEnabled: false,
			logs: [],
			pushTitle: '测试标题',
			pushContent: '这是一条测试推送消息'
		};
	},
	onLoad() {
		this.init();
	},
	onShow() {
		this.addLog('页面显示');
	},
	onHide() {
		this.addLog('页面隐藏');
	},
	methods: {
		// 初始化
		async init() {
			this.addLog('开始初始化推送测试');
			
			// 获取平台信息
			// #ifdef APP-PLUS
			this.platform = plus.os.name + ' ' + plus.os.version;
			this.addLog('平台信息：' + this.platform);
			
			// 获取客户端ID
			this.getClientId();
			
			// 检查通知权限
			this.checkNotificationPermission();
			
			// 监听推送消息
			this.listenPushMessage();
			// #endif
			
			// #ifndef APP-PLUS
			this.platform = '非APP环境';
			this.addLog('当前不在APP环境中，推送功能仅在APP中可用');
			// #endif
		},
		
		// 获取客户端ID
		getClientId() {
			// #ifdef APP-PLUS
			try {
				const info = plus.push.getClientInfo();
				this.clientId = info.clientid || '未获取到';
				this.addLog('客户端ID：' + this.clientId);
			} catch (e) {
				this.addLog('获取客户端ID失败：' + JSON.stringify(e));
			}
			// #endif
		},
		
		// 检查通知权限
		checkNotificationPermission() {
			// #ifdef APP-PLUS
			try {
				const notificationAuth = plus.push.getClientInfo().enable;
				this.notificationEnabled = notificationAuth;
				this.addLog('通知权限状态：' + (notificationAuth ? '已授权' : '未授权'));
			} catch (e) {
				this.addLog('检查通知权限失败：' + JSON.stringify(e));
			}
			// #endif
		},
		
		// 请求通知权限
		requestPermission() {
			// #ifdef APP-PLUS
			plus.nativeUI.confirm(
				'开启推送通知权限，及时接收重要消息',
				(e) => {
					if (e.index === 0) {
						const main = plus.android.runtimeMainActivity();
						const Intent = plus.android.importClass('android.content.Intent');
						const Settings = plus.android.importClass('android.provider.Settings');
						const intent = new Intent(Settings.ACTION_APP_NOTIFICATION_SETTINGS);
						intent.putExtra(Settings.EXTRA_APP_PACKAGE, main.getPackageName());
						main.startActivity(intent);
						this.addLog('已打开系统通知设置');
					}
				},
				{
					title: '通知权限',
					buttons: ['去设置', '取消']
				}
			);
			// #endif
		},
		
		// 监听推送消息
		listenPushMessage() {
			// #ifdef APP-PLUS
			try {
				// 监听在线消息
				plus.push.addEventListener('receive', (msg) => {
					this.addLog('收到推送消息：' + JSON.stringify(msg));
					console.log('推送消息详情：', msg);
					
					uni.showModal({
						title: '收到推送',
						content: msg.content || JSON.stringify(msg),
						showCancel: false
					});
				}, false);
				
				// 监听点击消息
				plus.push.addEventListener('click', (msg) => {
					this.addLog('点击了推送消息：' + JSON.stringify(msg));
					console.log('点击消息详情：', msg);
					
					uni.showModal({
						title: '点击推送',
						content: msg.content || JSON.stringify(msg),
						showCancel: false
					});
				}, false);
				
				this.addLog('推送消息监听已启动');
			} catch (e) {
				this.addLog('监听推送消息失败：' + JSON.stringify(e));
			}
			// #endif
		},
		
		// 创建本地通知
		createLocalNotification() {
			// #ifdef APP-PLUS
			try {
				const options = {
					cover: false,
					title: '本地通知测试',
					content: '这是一条本地推送通知消息',
					when: new Date()
				};
				
				plus.push.createMessage(
					options.content,
					JSON.stringify(options),
					{
						title: options.title,
						when: options.when
					}
				);
				
				this.addLog('本地通知已创建');
				uni.showToast({
					title: '本地通知已创建',
					icon: 'success'
				});
			} catch (e) {
				this.addLog('创建本地通知失败：' + JSON.stringify(e));
				uni.showToast({
					title: '创建失败',
					icon: 'none'
				});
			}
			// #endif
			
			// #ifndef APP-PLUS
			uni.showToast({
				title: '仅在APP中可用',
				icon: 'none'
			});
			// #endif
		},
		
		// 测试自定义通知
		testCustomNotification() {
			// #ifdef APP-PLUS
			try {
				const options = {
					cover: false,
					title: '自定义通知',
					content: '这是一条带有自定义数据的通知',
					payload: {
						type: 'custom',
						data: {
							id: 123,
							name: '测试数据'
						}
					},
					when: new Date()
				};
				
				plus.push.createMessage(
					options.content,
					JSON.stringify(options.payload),
					{
						title: options.title,
						when: options.when
					}
				);
				
				this.addLog('自定义通知已创建，携带数据：' + JSON.stringify(options.payload));
				uni.showToast({
					title: '自定义通知已创建',
					icon: 'success'
				});
			} catch (e) {
				this.addLog('创建自定义通知失败：' + JSON.stringify(e));
			}
			// #endif
		},
		
		// 测试富文本通知
		testRichNotification() {
			// #ifdef APP-PLUS
			try {
				const options = {
					cover: false,
					title: '重要提醒 🔔',
					content: '您有一个新订单待处理\n订单号：202501150001\n金额：¥99.00',
					when: new Date()
				};
				
				plus.push.createMessage(
					options.content,
					JSON.stringify({type: 'order', id: '202501150001'}),
					{
						title: options.title,
						when: options.when
					}
				);
				
				this.addLog('富文本通知已创建');
				uni.showToast({
					title: '富文本通知已创建',
					icon: 'success'
				});
			} catch (e) {
				this.addLog('创建富文本通知失败：' + JSON.stringify(e));
			}
			// #endif
		},
		
		// 发送自定义内容推送
		sendCustomPush() {
			if (!this.pushTitle || !this.pushContent) {
				uni.showToast({
					title: '请填写完整内容',
					icon: 'none'
				});
				return;
			}
			
			// #ifdef APP-PLUS
			try {
				const options = {
					cover: false,
					title: this.pushTitle,
					content: this.pushContent,
					when: new Date()
				};
				
				plus.push.createMessage(
					options.content,
					JSON.stringify({type: 'custom'}),
					{
						title: options.title,
						when: options.when
					}
				);
				
				this.addLog('自定义推送已发送：' + this.pushTitle);
				uni.showToast({
					title: '推送已发送',
					icon: 'success'
				});
			} catch (e) {
				this.addLog('发送自定义推送失败：' + JSON.stringify(e));
				uni.showToast({
					title: '发送失败',
					icon: 'none'
				});
			}
			// #endif
		},
		
		// 添加日志
		addLog(content) {
			const now = new Date();
			const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;
			
			this.logs.unshift({
				time,
				content
			});
			
			// 最多保留50条日志
			if (this.logs.length > 50) {
				this.logs.pop();
			}
		},
		
		// 清空日志
		clearLogs() {
			this.logs = [];
			this.addLog('日志已清空');
		}
	}
};
</script>

<style scoped>
.push-test-container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 30rpx;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #ffffff;
}

.section {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 20rpx;
	padding-bottom: 10rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.info-item {
	display: flex;
	align-items: center;
	padding: 15rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.info-item:last-child {
	border-bottom: none;
}

.label {
	font-size: 28rpx;
	color: #666666;
	width: 180rpx;
}

.value {
	flex: 1;
	font-size: 28rpx;
	color: #333333;
	word-break: break-all;
}

.value.success {
	color: #19be6b;
}

.value.error {
	color: #fa3534;
}

.btn {
	margin-top: 20rpx;
	background-color: #f8f8f8;
	color: #333333;
	border-radius: 10rpx;
	font-size: 28rpx;
	padding: 20rpx;
}

.btn.primary {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #ffffff;
}

.btn.secondary {
	background-color: #ff6b6b;
	color: #ffffff;
}

.log-container {
	max-height: 400rpx;
	background-color: #1e1e1e;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.log-item {
	display: flex;
	padding: 10rpx 0;
	border-bottom: 1rpx solid #333333;
}

.log-item:last-child {
	border-bottom: none;
}

.log-time {
	font-size: 24rpx;
	color: #4fc08d;
	margin-right: 20rpx;
	min-width: 120rpx;
	font-family: 'Courier New', monospace;
}

.log-content {
	flex: 1;
	font-size: 24rpx;
	color: #ffffff;
	word-break: break-all;
	font-family: 'Courier New', monospace;
}

.form-item {
	margin-bottom: 20rpx;
}

.form-label {
	font-size: 28rpx;
	color: #333333;
	display: block;
	margin-bottom: 10rpx;
}

.form-input {
	width: 100%;
	padding: 20rpx;
	border: 1rpx solid #e0e0e0;
	border-radius: 10rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}

.form-textarea {
	width: 100%;
	height: 150rpx;
	padding: 20rpx;
	border: 1rpx solid #e0e0e0;
	border-radius: 10rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}
</style>